<template>
    <div  style="background-color: #f4f4f4">
        <div class="main-container">

                    <ul class="demand_ul_list">
                        <li v-for="(item,index) in demands" :key="index" class="demands_list" @click="targetDemandUrl(item.demandId)">
                            <div class="demand_item">
                                <div class="demand_name">{{item.demands}}</div>
                                <span class="rmb"> RMB</span>
                                <span class="demand_price">{{item.priceLow }} - {{item.priceHigh}}</span>
                                <div class="project-cell__badge-wrapper">
                            <span class="credit-level-icon stage-badge project-cell__icon
                             stage-badge--label">{{item.style}}</span>
                                </div>

                                <div class="project-cell__info-row">
                                    <div class="project-cell__info-content">
                                        <i class="el-icon-price-tag">
                                        </i>{{item.categoryName}}
                                    </div>
                                    <div class="project-cell__info-wrapper">
                                        <div class="project-cell__info-content_date">
                                            <i class="el-icon-date"></i>
                                            {{$moment(item.closingDate).format("YYYY-MM-DD")}}
                                        </div>
                                    </div>
                                </div>

                                <div class="project-cell__summary-wrapper">
                                    详情摘要
                                    <div class="detail">
                                        {{item.requirements}}
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <section class="projects-sidebar" style="position: absolute">
                        <section class="projects-sidebar__section">
                            <section class="projects-sidebar__category-list-wrapper">
                                <div class="projects-sidebar__category is-active">
                                    <a href="/demands" style="color: #adb3fb">全部</a>
                                </div>
                                <div v-for="category in categories" class="projects-sidebar__category">
                                    <el-tag class="demandItem" v-for="category2 in category.categories"
                                            @click="searchDemand(category2)">
                                        {{category2.categoryName}}
                                    </el-tag>
                                </div>
                            </section>
                        </section>
                    </section>


        </div>
    </div>
</template>

<script>
    import {selectCategories} from "../../assets/api/categoryApi";
    import {searchDemandByCategory} from "../../assets/api/demandsApi";

    export default {
        data() {
            return {
                categories: [
                    {
                        categoryName: '',
                        categories: {categoryName: ''}
                    }
                ],
                demands: [],
            }
        },
        methods: {
            targetDemandUrl(value) {
                this.$router.push({path: '/demandDetails', query: {id: value}});
            },
            showCategories() {
                selectCategories(this.data).then((res) => {
                    this.categories = res.data;
                })
            },
            searchDemand(category) {
                this.$router.push({path:'/demandCategory', query:{tag:category.categoryName}});
                let data = {};
                data.categoryName = this.$route.query.tag;
                console.log(data);
                searchDemandByCategory(data).then((res) => {
                    this.demands = res.data;
                })
            },
            showDemands() {
                let data = {};
                data.categoryName = this.$route.query.tag;
                searchDemandByCategory(data).then((res) => {
                    this.demands = res.data;
                })
            },
        },
        created() {
            this.showCategories();
            this.showDemands();
        },
        watch: {
            $route(to, from) {
                location.reload();
            }
        },
    }
</script>

<style scoped>

    .main-container {
        width: 1200px;
        margin: 30px auto 0 auto;
        flex: 1;
    }

    .projects-sidebar {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        display: flex;
        border-radius: 4px;
        background: #ffffff;
        flex-direction: column;
        padding: 0 20px 10px 20px;
        flex: 0 0 240px;
        margin-right: 24px;
        width: 300px;
    }

    .projects-sidebar__section {
        padding: 20px 0;
    }

    .projects-sidebar__category-list-wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    .projects-sidebar__category {
        margin-top: 20px;
        margin-right: 15px;
        font-size: 14px;
        color: #4a4a4a;
        transition: .5s;
        cursor: pointer;
    }

    .demandItem {
        color: #222222;
        padding: 0px 10px;
        font-size: 12px;
        border: 1px solid #adb3fb;
        border-radius: 40px;
        margin: 5px 5px 5px 5px;
        transition: .5s;
        cursor: pointer;
    }

    .is-vertical {
        flex-direction: column;
    }

    .stage-flex-container {
        display: flex;
        width: 977px;
    }

    .projects-list {
        flex: 1;
    }

    .projects-list__list-wrapper {

    }

    .projects-list__cell-wrapper {
        padding: 12px;
        flex: 0 0 50%;
        width: 0;
    }

    .project-cell {
        padding: 20px;
        transition: .5s;
        border: 1px solid #ececec;
        display: flex;
        border-radius: 4px;
        background: #fff;
        flex-direction: column;
    }

    .projects-list__project-cell {
        display: flex;
    }

    .slideInUp {
        animation-name: slideInUp;
        animation-duration: 1s;
        animation-fill-mode: both;
        height: 206px;
        width: 400px;
    }

    .project-cell__header {
        display: flex;
        justify-content: space-between;
    }

    .project-cell__badge-wrapper {
        font-size: 0;
        min-height: 22px;
        margin-top: 20px;
        display: flex;
    }

    .stage-badge--label {
        padding: 3px 5px 3px 9px;
        border-radius: 2px;
        border: 1px solid #ececec;
        border-left: none;
        font-size: 12px;
        line-height: 14px;
        position: relative;
        overflow: hidden;
        background: #f8f8f8;
        color: #4a4a4a;
        font-weight: 400;
    }

    .project-cell__title {
        display: flex;
        align-items: center;
        flex: 0 0 65%;
        width: 0;
        font-size: 16px;
        margin: 0;
        line-height: 25px;
        color: #4a4a4a;
    }

    .project-cell__project-name, .project-cell__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
    }

    .project-cell__budget {
        flex: none;
        font-size: 18px;
        color: #adb3fb;
    }

    .project-cell__info-row {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

    .project-cell__info-content {
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
    }

    .project-cell__summary-wrapper {
        border-top: 1px solid #ececec;
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        color: #222222;
    }

    a {
        color: #00a8e9;
        transition: .5s;
        cursor: pointer;
        text-decoration: none;
    }

    .rmb {
        color: #adadad;
        font-size: 12px;
    }

    .detail {
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 15px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .demand_item {
        width: 300px;
        height: 200px;
        background-color: white;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    .projects-sidebar {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        display: flex;
        border-radius: 4px;
        background: #ffffff;
        flex-direction: column;
        padding: 0 20px 10px 20px;
        flex: 0 0 240px;
        margin-right: 24px;
        width: 300px;
    }

    .projects-sidebar__section {
        padding: 20px 0;
    }

    .projects-sidebar__category-list-wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    .projects-sidebar__category {
        margin-top: 20px;
        margin-right: 15px;
        font-size: 14px;
        color: #4a4a4a;
        transition: .5s;
        cursor: pointer;
    }

    .demandItem {
        color: #222222;
        padding: 0 10px;
        font-size: 12px;
        border: 1px solid #adb3fb;
        border-radius: 40px;
        margin: 5px 5px 5px 5px;
        transition: .5s;
        cursor: pointer;
    }

    .project-cell__badge-wrapper {
        font-size: 0;
        min-height: 22px;
        margin-top: 25px;
        display: flex;
        margin-left: 15px;
    }
    .stage-badge--label {
        padding: 3px 5px 3px 9px;
        border-radius: 2px;
        border: 1px solid #ececec;
        border-left: none;
        font-size: 12px;
        line-height: 14px;
        position: relative;
        overflow: hidden;
        background: #f8f8f8;
        color: #4a4a4a;
        font-weight: 400;
    }
    .project-cell__info-row {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
    .project-cell__info-content {
        margin-left: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
    }
    .project-cell__info-content_date {
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #222222;
        margin-right: 20px;
    }

    .project-cell__summary-wrapper {
        border-top: 1px solid #ececec;
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        color: #222222;
        margin-left: 10px;
    }

    a{
        color: #adb3fb;
        transition: .5s;
        cursor: pointer;
        text-decoration: none;
    }
    .rmb {
        float: right;
        color: #adadad;
        font-size: 12px;
        margin-right: 10px;
    }

    .detail {
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 15px;
        flex: 1;
        width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .demands_list {
        float: left;
        padding: 10px;
        list-style: none;
        border-radius: 10px;
        cursor: pointer;
    }

    .demand_ul_list {
        position: relative;
        left: 280px;
    }

    .demand_name {
        font-weight: bold;
        position: relative;
        top: 20px;
        left: 20px;
    }

    .demand_price {
        float: right;
        margin-right: 5px;
        font-weight: bold;
        color: cornflowerblue;
    }
</style>
